<template>
    <!-- 注册页面 -->
    <h2>注册页面</h2>
</template>

<script setup>
import { ref } from 'vue';

//获取注册表单对像
const registerFormRef = ref(null);
//
const registerForm = ref({
  username: '',
  phone: '',
  password: '',
  gender: 1, // 默认性别为男
});

const rules = ref({
  username: [
    { required: true, message: '用户名是必填项', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '手机号是必填项', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码是必填项', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ]
});

function handleRegister() {
  // 表单验证
  registerFormRef.value.validate((valid) => {
    if (valid) {
      console.log('注册信息:', registerForm.value);
      // todo 在这里添加注册逻辑

    } else {
      console.error('表单验证失败');
      return false;
    }
  });
}
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100vh;
  padding: 0 20px 20px 20px;
  background-image: url('@/assets/loginbg-1.png'); /* 假设背景图片在assets目录下 */
  background-size: cover;
  background-position: center;
}

.register-card {
  width: 960px;
}

.el-row {
    margin: 30px 0;
}
</style>